<template>
	<view class="container">
		<myp-navbar :lefts="lefts" :rights="rights" @leftAction="back" statusNavStyle="z-index: 99;"></myp-navbar>
		<view class="chat-body">
			  <myp-list ref="myp-list" :autoUpdate="false" :up="{use: false}" :down="{use: false}">
			    <myp-list-cell >
					<chatLine dire="left" text="How are you ?"></chatLine>
			    </myp-list-cell>
				<myp-list-cell>
					<chatLine dire="right" text="Fine! Thank you."></chatLine>	
				</myp-list-cell>
				<myp-list-cell>
					<chatLine dire="right" text="Fine! Thank you."></chatLine>	
				</myp-list-cell>
				<myp-list-cell>
					<chatLine dire="right" text="Fine! Thank you."></chatLine>	
				</myp-list-cell>
				<myp-list-cell>
					<chatLine dire="right" text="Fine! Thank you."></chatLine>	
				</myp-list-cell>
				<myp-list-cell>
					<chatLine dire="right" text="Fine! Thank you."></chatLine>	
				</myp-list-cell>
				<myp-list-cell>
					<chatLine dire="right" text="Fine! Thank you."></chatLine>	
				</myp-list-cell>
				<myp-list-cell>
					<chatLine dire="right" text="Fine! Thank you."></chatLine>	
				</myp-list-cell>
				<myp-list-cell>
					<chatLine dire="right" text="Fine! Thank you."></chatLine>	
				</myp-list-cell>
				<myp-list-cell>
					<chatLine dire="right" text="Fine! Thank you."></chatLine>	
				</myp-list-cell>
				<myp-list-cell>
					<chatLine dire="right" text="Fine! Thank you."></chatLine>	
				</myp-list-cell>
				<myp-list-cell>
					<chatLine dire="right" text="Fine! Thank you."></chatLine>	
				</myp-list-cell>
				<myp-list-cell>
					<chatLine dire="right" text="Fine! Thank you."></chatLine>	
				</myp-list-cell><myp-list-cell>
					<chatLine dire="right" text="Fine! Thank you."></chatLine>	
				</myp-list-cell>
			  </myp-list>
		</view>
		<view class="input">
			<view class="input-left-icon">
				<myp-icon name="listen"></myp-icon>
			</view>
			<view class="input-input-box">
				<textarea type="text" size="20" :show-confirm-bar="false" :auto-height="true" v-model="message" cursor-spacing="20" style="background-color: #FFFFFF;width: 430rpx;height: 80rpx;border-radius: 15rpx;line-height: 40px;" />
			</view>
			<view class="input-right-icon">
				<view style="margin-left: 30rpx; margin-right: 30rpx;">
					<myp-icon name="love"></myp-icon>
				</view>
				<myp-icon v-if="message.length == 0 " name="circle-plus"></myp-icon>
				<myp-button v-else text="发送" @buttonClicked="sendMessage" boxStyle="width:100rpx; height:75rpx;background:#00ef77;" textStyle="color:#FFFFFF"></myp-button>
			</view>
		</view>
	</view>
</template>

<script>
	import chatLine from "../../../../components/mychat-line"
	export default{
		components: {
			chatLine
		},
		data() {
			return {
				message: "12345",
				lefts: [
					{
						icon: 'left',
						text: '阿拉丁神鸡',
						textSize: 'll',
						textStyle: 'width:400rpx; margin: 20rpx'
					}
				],
				rights: [
					{
						icon: 'three-dot'
					}
				]
			}
		},
		methods: {
			sendMessage(){

			},
			back() {
				this.$Router.back();
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 750rpx;
		height: 100vh;
	}
	.chat-body{
		width: 750rpx;
	}
	.input {
		width: 750rpx;
		background: #eaeaea;
		position: fixed;
		bottom: 0rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		
		&-input-box{
			padding-bottom: 20rpx;
			padding-top: 20rpx;
			
		}
		
		&-right-icon{
			display: flex;
			align-items: center;
		}
		&-left-icon{
			margin-left: 30rpx;
			margin-right: 30rpx;
		}
	}
	
	

</style>
